// import React, { useEffect, useState } from 'react'
// import { useLocation } from 'react-router-dom'
// import { Image } from 'react-vant';

// interface MYPROPS {

// }

// interface DETILEDATATYPE {
//   user?: string,
//   id?: string,
//   img?: string,
//   title?: string
// }

// export default function Car() {
//   const location = useLocation()
//   const [detileData, setdetileData] = useState<DETILEDATATYPE>({})

//   useEffect(() => {
//     setdetileData(location.state as DETILEDATATYPE)

//   }, [])

//   useEffect(() => {
//     console.log(detileData,'detileData');

//   }, [detileData])

//   return (
//     <div>
//       <div className="demo-image">
//         {/* <Image width="100" height="100" src={detileData.img} /> */}
//         <p>{detileData.user}</p>
//       </div>
//     </div>
//   )
// }

import React, { useEffect, useState } from 'react'
import { useLocation,useNavigate } from 'react-router-dom'
import { ProductCard, Tag, Button } from 'react-vant';
import { useSelector, useDispatch } from 'react-redux'
import { ALLSTATE, CHECKHOOP,CHECKALLSHOP } from '../../../types/store.d'
import { SubmitBar, Checkbox } from 'react-vant';




export default function Car() {
  const dispatch = useDispatch()
  const nuseNavigate = useNavigate()
  //使用仓库hook获取仓库数据
  const carlist = useSelector((state: ALLSTATE) => {
    return state.carlist
  })
  console.log(carlist);
  
  //选中
  const hanClickCheck = (e: boolean, id: string) => {
    console.log(e, '666');
    let obj = {
      id: id,
      value: e
    }
    dispatch({
      type: CHECKHOOP,
      payload: obj
    })
  }

  //全选
  const handleAllCheck = (e: boolean) => {
    console.log(e);
   dispatch({
    type:CHECKALLSHOP,
    payload:e
   })

  }

  //反选
  const handleChoseCheck = (e:boolean)=>{
    dispatch({
      type:CHECKALLSHOP,
      payload:e
     })
  }

  const toId = () =>{
    console.log('111');
    nuseNavigate('/registry')
    
  }


  return (
    <div>
      {
        carlist && carlist.map((item, index) => {

          return <Checkbox key={index} onChange={(e) => hanClickCheck(e, item.id)} checked={item.isCheck}>
            <ProductCard
              key={index}
              num="2"
              price={item.price}
              desc={item.user}
              title={item.title}
              thumb={
                <>
                  <img src={item.img}></img>
                </>
              }

              footer={
                <>
                  <Button >
                    --
                  </Button>
                  <Button >
                    ++
                  </Button>
                </>
              }

            />
          </Checkbox>
        })
      }

      <div className="demo-submit-bar">
        <SubmitBar
          price="3050"
          buttonText="提交订单"
          tip={
            <>
              你的收货地址不支持同城送,
              <span style={{ color: '#1989fa' }} onClick={()=>toId()}>修改地址</span>
            </>
          }
        >
          <Checkbox onChange={(e) => handleAllCheck(e)}>全选</Checkbox>
          <Checkbox onChange={(e) => handleChoseCheck(e)}>反选</Checkbox>
        </SubmitBar>
      </div>

    </div>
  )
}
